<template>
  <div class="main">
    <!-- <editor-bar :catchData="catchData" :content="editorContent"></editor-bar> -->
    <!-- <div>{{onLine ? '网络正常':'网络异常'}}</div> -->
    <!-- <el-button type @click="readfile">读取文件</el-button>
    <div>{{percent}}</div>-->
    <a-button type @click="changedata">切换数据源</a-button>
    <a-carousel
      :after-change="onChange"
      style="width: 400px; height: 300px; background: red"
      autoplay
    >
      <div v-for="(item, index) in arr" :key="index">
        <h3>{{ item.name }}</h3>
      </div>
    </a-carousel>

    <el-button type="primary" :loading="true" @click="hand">加载中</el-button>

    <el-transfer
      v-model="selectedData"
      :data="allData"
      @change="handleChange"
    />
  </div>
</template>

<script>
// import EditorBar from "@/components/editoritem";
// import { log } from "console";
// const fs = require("fs");
// const path = require("path");
// const src = path.join(__dirname, "./1.txt");
export default {
  // components: { EditorBar },
  data() {
    return {
      onLine: navigator.onLine,
      percent: "",
      arr: [{ name: "1" }, { name: "2" }, { name: "3" }, { name: "4" }],
      allData: [
        // 所有可选项的数组
        { key: "1", label: "Option 1" },
        { key: "2", label: "Option 2" },
        { key: "3", label: "Option 3" },
        { key: "4", label: "Option 4" },
        { key: "5", label: "Option 5" },
      ],
      selectedData: [
        // 已选中的项的数组
      ],
    };
  },
  mounted() {
    window.addEventListener("online", this.updateOnlineStatus);
    window.addEventListener("offline", this.updateOnlineStatus);
  },
  methods: {
    handleChange(transferData) {
      const { to, from, movedKeys } = transferData;
      if (to === "right") {
        // 将选中的项从左侧数组中删除并添加到右侧数组中
        this.selectedData = this.selectedData.concat(movedKeys);
      } else {
        // 将选中的项从右侧数组中删除并添加到左侧数组中
        this.selectedData = this.selectedData.filter(
          (item) => !movedKeys.includes(item)
        );
      }
    },
    hand() {
      console.log(5555);
    },
    // 监听富文本的输入
    catchData(e) {
      console.log("e=====?>", e, "111");
    },
    //富文本中的内容
    editorContent(e) {
      console.log("e=====?>", e, "22");
    },
    updateOnlineStatus(e) {
      const { type } = e;
      this.onLine = type === "online";
    },
    readfile() {
      console.log(fs, 5555);
      debugger;
      // 根据指定的文件创建一个可读流，得到一个可读流对象
      let readStream = fs.createReadStream(src);

      let totalSize = fs.statSync(src).size; // 通过 fs.statSync 获取文件大小
      let curSize = 0;
      this.percent = "0%";

      // 流对象有一个 data 事件，流对象会自动的帮我们去读取文件中的数据
      // 一点一点的读，只要读到了一点数据，就触发 data 事件，将该数据传递给 data 事件的回调函数
      readStream.on("data", (chunk) => {
        // chunk 数据块
        // 计算当前读取到的文件的大小，计算读取的顺序
        // chunk 是一个 buffer 对象
        // 每一次读取到了一点数据，将该数据的长度累加起来 / 文件的总大小 * 100 得到百分比
        curSize += chunk.length;
        // 将已经读取到的字节数 / 总字节数 * 100 = 百分比
        this.percent = ((curSize / totalSize) * 100).toFixed(2) + "%";
        console.log("读取中" + percent);
      });

      // end 事件监听读写结束
      readStream.on("end", () => {
        console.log("读取结束");
      });
    },
    changedata() {
      this.arr = [
        { name: "5" },
        { name: "6" },
        { name: "7" },
        { name: "8" },
        { name: "9" },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
/* For demo */
.main {
  width: 500px;
  height: 400px;
  background: #e3e3e3;
}
</style>
